<template>
  <div class="teacher_commen">
    <div class="title">领队老师</div>
    <div class="box">
      <div
        class="picture"
        v-for="(item, index) in teacherImgs"
        :key="index"
        @mouseenter="Slide(index)"
        @mouseleave="Out"
      >
        <img :src="item.url" alt="" />
        <transition name="fade">
          <div class="detail" v-if="show===index?true:false">
            <h3>hhh</h3>
            <div>
              驾驶的大奖是口碑和基本是电话不接好打驾驶的大奖是口碑和基本是电话不接好打包驾驶的大奖是口碑和基本是电话不接好打包驾驶的大奖是口碑和基本是电话不接好打包
              驾驶的大奖是口碑和基本是电话不接好打包驾驶的大奖是口碑和基本是电话不接好打包驾驶的大奖是口碑和基本是电话不接好打包包
              驾驶的大奖是口碑和基本是电话不接好打包驾驶的大奖是口碑和基本是电话不接好打包
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TeacherModule",
  props: {
    teacherImgs: {
      type: Array,
    },
  },
  data() {
    return {
      show: null,
      tiemr: true,
      suo: 0,
    };
  },
  methods: {
    Slide(e) {
      this.show = e;
      // console.log(this.$refs.i_height[0].style.height);
      // this.$refs.i_height[0].style.height='100%'
      // if(this.show===true){
      // this.show=true
      // }
      // if (this.suo === 0 && this.tiemr === true) {
      //   this.suo = 1;
      //   this.show = true;
      //   await setTimeout(() => {
      //     this.tiemr = false
      //   }, 500);
      //   console.log(this.show);
      // }
    },
    Out() {
      this.show = false;
      // console.log(222);
      // this.$refs.i_height[0].style.height=0
      // if (this.suo === 1 && this.tiemr === false) {
      //         this.suo = 0;
      //         this.show = false;
      //         await setTimeout(() => {
      //         this.tiemr =true
      //       }, 500);
      //       console.log(this.show);
      //     }
    },
  },
};
</script>
<style lang="less" scoped>
.teacher_commen {
  width: 1200px;
  height: 400px;
  margin: 150px auto;
  .title {
    height: 30px;
    margin: 20px 30px;
    text-align: center;
    font-size: 25px;
  }
  .box {
    height: 330px;
    margin: 20px 30px;
    display: flex;
    justify-content: space-between;
    .picture {
      width: 250px;
      height: 330px;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .detail {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        // height: 100%;
        opacity: 0.7;
        background-color: black;
        overflow: hidden;
        // transition: height 0.4s ease-in-out;
        h3 {
          margin: 20px;
        }
        div {
          margin: 0 20px 20px;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 12;
          overflow-wrap: break-word;
        }
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-100%);
}
.fade-enter-to, .fade-leave /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(0%);
}
</style>